import React, {PureComponent} from "react"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
import { Link} from "react-router-dom"
import {Tabs, Button,Icon,Input} from "antd"
import Organize from "./components/organize";
import Assessment from "./components/assessment";
import AssessmentTemplate from "./components/assessmentTemplate";
import { addMainDepartment,getPerson } from "./actions";
import "./style.less"
/*redux连接池*/
@connect(
    ({base}) => ({
        organizes:base.organizes
    }),
    (dispatch) => (
        bindActionCreators({
            addMainDepartment,
            getPerson,
        }, dispatch)
    )
)
export default class YourName extends PureComponent {
    state = {
        active: "1",
        showTip: true,
        baseInput:"",
        showContent:false
    }

    render() {
        const {organizes} = this.props;
        const {active, showTip,showContent} = this.state;
        return (
            <div className="base-bg">
                <Link to="/index">
                    <Icon type="close-circle-o" />
                </Link>
                <div className="base">
                    {
                        showTip && <h1>绩效考核配置</h1>
                    }
                    <div className={`base-menus${active}`}>
                        <div className="base-menus">
                            <div onClick={() => {
                                this.changeTab("1")
                            }}>
                                组织构架
                            </div>
                            <div onClick={() => {
                                this.changeTab("2")
                            }}>考核库
                            </div>
                            <div onClick={() => {
                                this.changeTab("3")
                            }}>考核模板
                            </div>
                        </div>
                        <div className="base-line">
                            <span className="base-line-roll one"></span>
                            <span className="base-line-roll two"></span>
                            <span className="base-line-roll tree"></span>
                            <span className="base-line-big-roll"></span>
                        </div>
                    </div>
                    {
                        (!showTip && !showContent) && <div className="base-main-input">
                            <p>
                                <span className="tip">主单位</span>
                            </p>
                            <Input ref="baseInput" defaultValue={organizes.name} onChange={this.changeInput} maxLength="16" placeholder="请输入主单位名称"/>
                            <Button onClick={this.addBase}>确定</Button>
                        </div>
                    }
                    {
                        showContent && <div className="base-search">
                            <Input.Search
                                placeholder="搜索部门"
                                style={{ width: 160}}
                                onSearch={this.onSearch}
                            />
                        </div>
                    }
                    {
                        showContent && <Tabs activeKey={active} onChange={this.changeTab}>
                            <Tabs.TabPane
                                tab="Tab 1"
                                key="1"
                                style={{color: "white"}} >
                                {
                                    !showTip && <Organize P/>
                                }
                            </Tabs.TabPane>
                            <Tabs.TabPane
                                tab="Tab 2"
                                key="2"
                                style={{color: "white"}} >
                                <AssessmentTemplate/>
                            </Tabs.TabPane>
                            <Tabs.TabPane
                                tab="Tab 3"
                                key="3"
                                style={{color: "white"}} >
                                <Assessment/>
                            </Tabs.TabPane>
                            <Tabs.TabPane
                                tab="搜索部门"
                                key="4"
                                style={{color: "white"}} >
                                <p>搜索部门</p>
                            </Tabs.TabPane>
                        </Tabs>
                    }
                    {
                        showTip && <div className="tips">
                            <p>组织构架中创建部门，是开启绩效考核的第一步</p>
                            <Button onClick={() => {
                                this.setState({showTip: false, active: "1"})
                            }}>好的</Button>
                        </div>
                    }
                </div>
            </div>
        )
    }
    onSearch=(e)=>{
        this.setState({
            active:"4"
        })
    }
    changeTab = (index) => {
        let {showTip} = this.state;
        if (!showTip) {
            this.setState({
                active: index
            })
        }
    };
    changeInput = (e)=>{
        this.setState({
            baseInput:e.target.value
        })
    };
    addBase=()=>{
        let {addMainDepartment} = this.props;
        let {baseInput} = this.state;
        if(!!baseInput.length){
            addMainDepartment(baseInput);
            this.setState({
                showContent:true
            })
        }
    }
    componentDidMount() {
        let {getPerson} = this.props;
        getPerson();
    }
}
